<template>
  <div class="add-user">
    <el-dialog v-model="centerDialogVisible" title="新增用户" width="30%" center destroy-on-close>
      <el-form :model="form" label-position="right" label-width="80px">
        <el-form-item label="用户名" prop="userName">
          <el-input v-model="form.userName" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="真实姓名" prop="realName">
          <el-input v-model="form.realName" placeholder="请输入真实姓名"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="form.password" placeholder="请输入密码" show-password></el-input>
        </el-form-item>
        <el-form-item label="手机号码" prop="cellPhone">
          <el-input v-model="form.cellPhone" placeholder="请输入手机号码"></el-input>
        </el-form-item>
        <el-form-item label="选择角色" prop="roleId">
          <el-select v-model="form.roleId" placeholder="请选择角色">
            <el-option v-for="item in allRoles" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选择部门" prop="departMentId">
          <el-select v-model="form.departMentId" placeholder="请选择部门">
            <el-option v-for="item in allDepartments" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="centerDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleSubmit">
            确认
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import type { IUser } from '@/service/main/system/user';
import useRoleStore from '@/store/main/role';
import useSystemStore from '@/store/main/system';
import { storeToRefs } from 'pinia';
import { ref } from 'vue';

const form = ref({
  userName: '',
  realName: '',
  password: '',
  cellPhone: '',
  roleId: '',
  departMentId: ''
});

const centerDialogVisible = ref(false)

// 是否新增用户
const isNewRef = ref(true);
function openDialog(isNew: boolean = true, formData?: IUser) {
  isNewRef.value = isNew;
  centerDialogVisible.value = true;
  if (isNew) {

  } else {
    console.log('formData: ', formData);
  }
}

// 获取角色、部门下拉数据
const roleState = useRoleStore()
const { allRoles, allDepartments } = storeToRefs(roleState)

const userStore = useSystemStore();

function handleSubmit() {
  userStore.addUserAction(form.value).then(() => {
    centerDialogVisible.value = false;
  });
}

defineExpose({
  openDialog,
});
</script>
<style scoped lang="less">
.add-user {
  .el-form {
    padding: 0 30px;
  }
}
</style>
